语法
animation-duration: <time>[,<time>]*; 指定对象动画的持续时间 。
| 语法项目 | 说明 |
|---|---|
| 初始值 | 0 |
| 适用于 | 所有元素 |
| 可否继承 | 否 |
| 单位 | S |
| 媒介 | 视觉 |
| 版本 | CSS3.0 |
说明
检索或设置对象动画的持续时间
如果提供多个属性值，以逗号进行分隔。
取值
<time>：正数，单位可以是秒(s)或者毫秒(ms)。默认值为0，表明动画不执行。
实例代码
CSS
.animation_duration{
left:10px;
top:100px;
position:absolute;
-webkit-animation:0.5s ease 1 forwards;
-webkit-animation-duration:2s;
-webkit-animation-name:demo;
-moz-animation:0.5s ease 1 forwards;
-moz-animation-name:demo;
-moz-animation-duration:2s;
}
@-webkit-keyframes demo{
0%{left:10px;}
100%{left:400px;}
}
HTML
运行一下 »
<div class="demo_box animation_duration">我一共运行了2秒钟</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | 目前暂无版本支持 | Safari 10+ | Chrome 2.0+ |